<!-- 资讯审批 -->
<!-- 资讯审批 -->
<!-- 资讯审批 -->
<template>
  <div>
    <myDivider name="资讯审批"></myDivider>

    <!-- 顶部搜索 -->
    <div class="top">

      <el-date-picker @change="SouSuo" value-format="yyyy-MM-dd" style="width: 250px;" v-model="typeTime"
        type="daterange" unlink-panels :range-separator="null" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-select class="width1" v-model="keytype" placeholder="" @change="SouSuo">
        <el-option label="全部" value=""></el-option>
        <el-option label="审批中" value="1"></el-option>
        <el-option label="审批通过" value="2"></el-option>
        <el-option label="审批驳回" value="3"></el-option>
        <el-option label="已失效" value="4"></el-option>
      </el-select>
      <el-input class="width1" v-model="keytitle" placeholder="输入关键字查询查询"></el-input>
      <el-button type="primary" @click="SouSuo">搜索</el-button>
    </div>

    <!-- 表格列表 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="informationTitle" label="标题" width="160">
          <template slot-scope="scope" style="position: relative;">
            <span>{{ scope.row.informationTitle }}</span>
            <el-tooltip v-if="scope.row.ifAdvent == 1" class="item" effect="dark" content="距离发布时间仅剩6小时"
              placement="top-start">
              <div style="position: absolute;right: 0;top: 50%;transform:translateY(-50%);">
                <i class="el-icon-warning" style="color: red;cursor: pointer;"></i>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="审核类型" width="200">
          <template slot-scope="scope" style="position: relative;">
            <span>{{ scope.row.informationTitle == 'public' ? '公告发布审批' : '公告修改审批' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="applicantName" label="提审人" width="150">
        </el-table-column>
        <el-table-column align="center" prop="applyTime" label="提审时间" min-width="200">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="处理时间" min-width="200">
        </el-table-column>
        <el-table-column align="center" prop="" label="状态" width="200">
          <template slot-scope="scope" style="position: relative;">
            <span>{{ statusList[scope.row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <div style="display: flex;margin-top: 10px;justify-content:center;">
              <el-button v-if="scope.row.status == 1" size="small" icon="el-icon-s-claim" @click="Preview('审批', scope.row)"
                type="primary">审批</el-button>
              <el-button v-else size="small" icon="el-icon-document-remove" @click="Preview('详情', scope.row)"
                type="primary">详情</el-button>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="roomName" label="房间信息" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roomName" placement="top-start">
              <span> {{
                scope.row.roomName.length > 8 ? '...' + scope.row.roomName.slice(scope.row.roomName.length - 8) :
                scope.row.roomName
              }}</span>
            </el-tooltip>
          </template> 
        </el-table-column> -->
      </el-table>
    </div>

    <!-- 分页器 -->
    <myPagination :pageSize="pageSize" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //顶部筛选
      keytype: '',
      typeTime: [],
      keytitle: '',
      // 表格数据
      tableData: [],
      // 预览弹窗
      YuLanShow: false,
      YuLanRules: {},
      YuLanData: {},
      //消息详情弹窗
      XXXQShow: false,
      XXXQRules: {},
      XXXQData: {},
      // 分页器
      total: 1,
      pageNum: 1,
      pageSize: 10,
      statusList: ['', '审批中', '审批通过', '审批驳回', '已失效']
    }
  },
  async activated() {

    this.keytype = ''
    this.typeTime = ''
    this.keytitle = ''
    this.getTableList()
  },
  deactivated() {

  },
  methods: {
    pageSizeChange(e) {
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {
      this.pageNum = e
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    popOk(val) { //所有弹窗的确认
      switch (val) {
        case '预览':
          this.YuLanShow = false
          break
        case '消息详情':
          this.XXXQShow = false
          break
      }
    },
    popClose(val) { //所有弹窗的取消
      switch (val) {
        case '预览':
          this.YuLanShow = false
          break
        case '消息详情':
          this.XXXQShow = false
          break
      }
    },

    Preview(name, row) { //表格预览按钮

      // 还需要给一个类型，看她是物业小区的还是机关机构的
      this.$router.push(`/information/informationShenPi?id=${row.id}&name=${name}`)
    },
    Preview1(row) { //详情测试按钮
      this.XXXQShow = true
      console.log(row, '详情数据');
    },

    keytypeChange(val) {//顶部按钮 筛选消息类型
      console.log(val);
    },
    async getTableList() { // 获取表格列表
      if (!this.typeTime) {
        this.typeTime = ['', '']
      }
      let user = JSON.parse(sessionStorage.getItem('logOnUser'))
      let res = await this.$api.message.MyinapprovalList({
        "startTime": this.typeTime[0], //筛选日期开始时间 非必填
        "endTime": this.typeTime[1], //筛选日期结束时间 非必填
        "keyword": this.keytitle, //关键字 非必填
        "status": this.keytype,
        "pageNum": this.pageNum,
        "pageSize": this.pageSize,
        "unitType": user.unitType, //机关agency  机构company 系统system必传
        "unitId": user.unitId, //系统传0
      })
      console.log(res.data.list, '列表数据');
      this.tableData = res.data.list
      this.total = res.data.total
    },
  },
}
</script>

<style lang="less" scoped>
.width1 {
  width: 200px;
}

.width2 {
  width: 500px;
}

.top {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  position: relative;
}

.tableBox {
  margin-top: 50px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        
      }
    }
  }

}
</style>